<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="after-navber">
            <view class="search flex-y-center">
                <view class="search-input flex-row">
                    <input @blur="inputBlur" @confirm="inputConfirm" @focus="inputFocus" @input="input" class="input flex-grow-1" confirmType="search" placeholder="请输入关键字" placeholderClass="input-pp" :value="data.keyword"></input>
                    <view @tap="search" :class="['search-btn flex-grow-0 flex-y-center flex-x-center flex-row', data.show?'':'hidden']">
                        <image class="flex-grow-0" :src="data.__wxapp_img.shop.search.url" style="width:24upx;height:24upx;margin-right:10upx;"></image>
                        <view class="flex-grow-1">搜索</view>
                    </view>
                </view>
            </view>
            <view class="shop-list w-100">
                <view @tap="go" class="shop-one flex-row" :data-index="index" v-for="(item,index) in data.list" :key="item.id">
                    <view class="flex-grow-0 flex-y-center">
                        <image :src="item.pic_url" style="width:150upx;height:150upx;border-radius:150upx;"></image>
                    </view>
                    <view class="w-100 flex-grow-1" style="margin:0 20upx;">
                        <view class="text-more" style="color:#353535;">{{item.name}}</view>
                        <view class="fs-sm flex-row" style="margin-top:22upx;">
                            <view class="flex-grow-0" style="margin-right:12upx;">评分：</view>
                            <view class="flex-grow-1">
                                <image :src="data.__wxapp_img.shop.love.url" style="margin-right:4upx;width:20upx;height:18upx;" v-if="idx<=item.score-1" v-for="(itemn,idx) in data.score" :key="itemn.id"></image>
                            </view>
                        </view>
                        <view class="fs-sm" style="margin-top:22upx;">电话：{{item.mobile}}</view>
                        <view class="fs-sm" style="margin-top:22upx;">距离：{{item.distance==-1?'无':item.distance}}</view>
                    </view>
                    <view class="flex-grow-0 flex-y-center">
                        <view catchtap="goto" :data-index="index">
                            <view style="text-align: right">
                                <image :src="data.__wxapp_img.shop.nav_one.url" style="width:50upx;height:50upx;margin-right:18upx;margin-bottom:16upx;"></image>
                            </view>
                            <view class="fs-sm flex-x-center">一键导航</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	require("../../../utils/helper.js");
	export default {
		data() {
			return {
				data: {
        page: 1,
        page_count: 1,
        longitude: "",
        latitude: "",
        score: [ 1, 2, 3, 4, 5 ],
        keyword: ""
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = this;
        e.setData({
            ids: t.ids
        }), myVue.getApp.core.getLocation({
            success: function(t) {
                e.setData({
                    longitude: t.longitude,
                    latitude: t.latitude
                });
            },
            complete: function() {
                e.loadData();
            }
        });
    },
    onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
    },
		onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
        var e = this;
        e.setData({
            keyword: "",
            page: 1
        }), myVue.getApp.core.getLocation({
            success: function(t) {
                e.setData({
                    longitude: t.longitude,
                    latitude: t.latitude
                });
            },
            complete: function() {
                e.loadData(), myVue.getApp.core.stopPullDownRefresh();
            }
        });
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this);
        var e = this;
        e.data.page >= e.data.page_count || e.loadMoreData();
    },
		methods: {
			loadData: function() {
        var t = this;
        myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.shop_list,
            method: "GET",
            data: {
                longitude: t.data.longitude,
                latitude: t.data.latitude,
                ids: t.data.ids
            },
            success: function(e) {
                0 == e.code && t.setData(e.data);
            },
            fail: function(t) {},
            complete: function() {
                t.getApp.core.hideLoading();
            }
        });
    },
		loadMoreData: function() {
        var e = this, a = e.data.page;
        t || (t = !0, myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.shop_list,
            method: "GET",
            data: {
                page: a,
                longitude: e.data.longitude,
                latitude: e.data.latitude,
                ids: e.data.ids
            },
            success: function(t) {
                if (0 == t.code) {
                    var o = e.data.list.concat(t.data.list);
                    e.setData({
                        list: o,
                        page_count: t.data.page_count,
                        row_count: t.data.row_count,
                        page: a + 1
                    });
                }
            },
            complete: function() {
                e.getApp.core.hideLoading(), t = !1;
            }
        }));
    },
    goto: function(t) {
        var e = this;
        "undefined" != typeof my ? e.location(t) : myVue.getApp.core.getSetting({
            success: function(a) {
                a.authSetting["scope.userLocation"] ? e.location(t) : myVue.getApp.getauth({
                    content: "需要获取您的地理位置授权，请到小程序设置中打开授权！",
                    cancel: !1,
                    author: "scope.userLocation",
                    success: function(a) {
                        a.authSetting["scope.userLocation"] && e.location(t);
                    }
                });
            }
        });
    },
    location: function(t) {
        var e = this, a = t.currentTarget.dataset.index, o = e.data.list;
        myVue.getApp.core.openLocation({
            latitude: parseFloat(o[a].latitude),
            longitude: parseFloat(o[a].longitude),
            name: o[a].name,
            address: o[a].address
        });
    },
    inputFocus: function(t) {
        this.setData({
            show: !0
        });
    },
    inputBlur: function(t) {
        this.setData({
            show: !1
        });
    },
    inputConfirm: function(t) {
        this.search();
    },
    input: function(t) {
        this.setData({
            keyword: t.detail.value
        });
    },
    search: function(t) {
        var e = this;
        myVue.getApp.core.showLoading({
            title: "搜索中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.shop_list,
            method: "GET",
            data: {
                keyword: e.data.keyword,
                longitude: e.data.longitude,
                latitude: e.data.latitude,
                ids: e.data.ids
            },
            success: function(t) {
                0 == t.code && e.setData(t.data);
            },
            complete: function() {
                e.getApp.core.hideLoading();
            }
        });
    },
    go: function(t) {
        var e = this, a = t.currentTarget.dataset.index, o = e.data.list;
        myVue.getApp.core.navigateTo({
            url: "/pages/shop-detail/shop-detail?shop_id=" + o[a].id
        });
    },
    navigatorClick: function(t) {
        var e = t.currentTarget.dataset.open_type, a = t.currentTarget.dataset.url;
        return "wxapp" != e || (a = function(t) {
            var e = /([^&=]+)=([\w\W]*?)(&|$|#)/g, a = /^[^\?]+\?([\w\W]+)$/.exec(t), o = {};
            if (a && a[1]) for (var n, i = a[1]; null != (n = e.exec(i)); ) o[n[1]] = n[2];
            return o;
        }(a), a.path = a.path ? decodeURIComponent(a.path) : "", myVue.getApp.core.navigateToMiniProgram({
            appId: a.appId,
            path: a.path,
            complete: function(t) {}
        }), !1);
    }
		},
	}
</script>

<style scoped>
.search {
    width: 100%;
    height: 90upx;
}

.search-input {
    width: 100%;
    height: 56upx;
    border-radius: 10upx;
    margin: 0 24upx;
    background-color: #fff;
}

.input-pp {
    height: 100%;
    line-height: 56upx;
}

.input {
    height: 100%;
    line-height: 56upx;
    padding-left: 30upx;
}

.search-btn {
    background-color: #ddd;
    border-radius: 0 10upx 10upx 0;
    padding: 0 20upx;
}

.shop-one {
    background-color: #fff;
    width: 100%;
    padding: 26upx 24upx;
    border-bottom: 1upx solid #e2e2e2;
    color: #707070;
}

.shop-one:last-child {
    border: 0;
}
</style>
